<template>
  <div>
    <el-table :data="shop.shopList" border style="width: 100%">
      <el-table-column prop="shopName" align="center" label="店铺名称"></el-table-column>
      <el-table-column prop="describe" label="店铺描述" align="center"></el-table-column>
      <el-table-column prop="appDate" label="申请时间" align="center"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row._id)" type="text" size="small">通过</el-button>
          <el-button type="text" @click="removeClick(scope.row._id)" size="small">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="paginationMain">
        <span>首页</span>
        <span>上一页</span>
        <span>下一页</span>
        <span>尾页</span>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
var { mapState, mapActions } = createNamespacedHelpers("shop");
export default {
  computed: {
    ...mapState(["shop"])
  },
  methods: {
    ...mapActions(["getApplicationShopAsync", "agreeAndRefuseAsync"]),
    handleClick(data) {
      this.agreeAndRefuseAsync({ _id: data, bool: 2 });
      this.getApplicationShopAsync();
    },
    removeClick(data) {
      this.agreeAndRefuseAsync({ _id: data, bool: 3 });
      this.getApplicationShopAsync();
    }
  },
  created() {
    this.getApplicationShopAsync();
  }
};
</script>

<style scoped>
/* label:nth-child(1){
    aria-checked:true
} */
.el-input input {
  border: none;
}
.pagination .paginationMain {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination .paginationMain span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.pagination .paginationMain span:hover {
  border: 1px solid #f3a83f;
  color: #f3a83f;
}
</style>